<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <el-form
      :model="searchForm"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
    >
      <el-form-item label="活动名称" prop="name">
        <el-input
          v-model="searchForm.name"
          placeholder="请输入活动名称"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleSearch"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleSearch"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetSearch"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <!-- 操作按钮区域，只保留搜索工具栏 -->
    <el-row :gutter="10" class="mb8">
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <!-- 表格区域 -->
    <el-table v-loading="loading" :data="tableData">
      <el-table-column prop="id" label="活动ID" width="120" align="center" />
      <el-table-column
        prop="name"
        label="活动名称"
        :show-overflow-tooltip="true"
        width="150"
      />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleStart(scope.row)"
            :disabled="scope.row.status === '1'"
            >开启活动</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="handleStop(scope.row)"
            :disabled="scope.row.status === '2'"
            >关闭活动</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="currentPage"
      :limit.sync="pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
// 导入API方法
import { listActive, editStatus } from "@/api/active";

export default {
  name: "ActivityManage",
  data() {
    return {
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 查询参数
      searchForm: {
        name: "",
        status: "",
      },
      // 表格数据
      tableData: [
        {
          id: 1,
          name: "选手介绍",
          status: "1", // 进行中
        },
        {
          id: 2,
          name: "广场动态",
          status: "1", // 进行中
        },
        {
          id: 3,
          name: "聊天室",
          status: "1", // 进行中
        },
        {
          id: 4,
          name: "视觉投票",
          status: "1", // 进行中
        },
      ],
      currentPage: 1,
      pageSize: 10,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 搜索
    handleSearch() {
      this.currentPage = 1;
      this.getList();
    },
    // 重置搜索
    resetSearch() {
      this.searchForm.name = "";
      this.searchForm.status = "";
      this.handleSearch();
    },
    // 获取列表数据
    async getList() {
      this.loading = true;
      try {
        const response = await listActive({
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          name: this.searchForm.name,
          status: this.searchForm.status,
        });

        // 根据返回的数据结构调整
        if (response.code === 200) {
          this.tableData = response.rows.map((item) => ({
            id: item.id,
            name: item.activityName,
            code: item.activityCode,
            status: item.status ? "1" : "2", // 将 boolean 转换为字符串状态
          }));
          this.total = response.total;
        } else {
          this.$message.error(response.msg || "获取数据失败");
        }
        this.loading = false;
      } catch (error) {
        this.$message.error("获取数据失败");
        this.loading = false;
      }
    },
    // 开启活动
    handleStart(row) {
      this.$modal
        .confirm('是否确认开启"' + row.name + '"活动？')
        .then(async () => {
          try {
            await editStatus(row.id, true);
            row.status = "1";
            this.$message.success("活动已开启");
            this.getList(); // 刷新列表
          } catch (error) {
            this.$message.error("开启活动失败");
          }
        })
        .catch(() => {});
    },
    // 关闭活动
    handleStop(row) {
      this.$modal
        .confirm('是否确认关闭"' + row.name + '"活动？')
        .then(async () => {
          try {
            await editStatus(row.id, false);
            row.status = "2";
            this.$message.success("活动已关闭");
            this.getList(); // 刷新列表
          } catch (error) {
            this.$message.error("关闭活动失败");
          }
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.mb8 {
  margin-bottom: 8px;
}

.small-padding {
  padding-left: 5px;
  padding-right: 5px;
}

.fixed-width {
  min-width: 120px;
}
</style>
